<template>
    <view class="page">
        <mx-navbar :title="goods.name"></mx-navbar>

        <scroll-view scroll-y scroll-with-animation class="goods-body" :scroll-into-view="'main-' + main_cur"
            :style="`height:calc(100vh - ${$hh}px)`" @scroll="verticalMain">
            <view class="fixtab" :style="{ 'opacity': opacity }">
                <view class="fi" @click.stop="scrollPage(0)" :class="{ 'fiact': scroll_index == 0 }">商品<view
                        class="line" v-if="scroll_index == 0"></view>
                </view>
                <view class="fi" @click.stop="scrollPage(1)" :class="{ 'fiact': scroll_index == 1 }">图文详情<view
                        class="line" v-if="scroll_index == 1"></view>
                </view>
                <view class="fi" @click.stop="scrollPage(2)" :class="{ 'fiact': scroll_index == 2 }">购买须知<view
                        class="line" v-if="scroll_index == 2"></view>
                </view>
            </view>

            <view id="main-info">
                <!-- 商品轮播 -->
                <g-banner :list="goods.img" :img_height="750"></g-banner>
                <!-- 商品基础信息 -->
                <g-info :goods="goods"></g-info>
                <!-- 商品规格 -->
                <g-attr :goods="goods"></g-attr>
                <!-- 商品活动信息 -->
                <g-prom :goods="goods" :active="active" :coupon_list="coupon_list" @promClick="promClick"></g-prom>
                <!-- 品牌信息 -->
                <g-brand :info="brand"></g-brand>
            </view>

            <view id="main-desc">
                <!-- 图文详情 -->
                <g-desc :id="id"></g-desc>
            </view>

            <view id="main-help">
                <!-- 购买帮助 -->
                <g-help></g-help>
            </view>


        </scroll-view>
        <!-- 底部导航栏 -->
        <g-bar @complete="spec_status = true" :goods="goods" :cart_num="cart_num"></g-bar>
        <!-- 规格弹窗 -->
        <g-spec v-model="spec_status" :goods="goods" @addCart="addCart"></g-spec>
        <!-- 促销信息 -->
        <g-promdetail v-model="prom_status" :cp_list="coupon_list" :goods="goods" :active="active"></g-promdetail>
    </view>
</template>

<script setup>
import gBanner from './com/g-banner.vue'
import gInfo from './com/g-info.vue'
import gProm from './com/g-prom.vue'
import gSpec from './com/g-spec.vue'
import gPromdetail from './com/g-promdetail.vue'
import gAttr from './com/g-attr.vue'
import gBrand from './com/g-brand.vue'
import gDesc from './com/g-desc.vue'
import gHelp from './com/g-help.vue'
import gBar from './com/g-bar.vue'
const { proxy } = getCurrentInstance();
const data = reactive({
    id: '',
    goods: {},
    brand: {},
    active: {},
    cart_num: 0,
    spec_status: false,
    prom_status: false,
    coupon_list: []
})
const {
    id, goods, brand, active, spec_status,prom_status, cart_num, coupon_list
} = toRefs(data)

onLoad((option) => {
    data.id = option.id
})
onShow(() => {
    getData()
    getCartNum()
    getGoodsCoupon()
})

async function getData() {
    let res = await proxy.$api('Goods', { id: data.id })
    if (res.code == 0) {
        data.goods = res.data.goods
        data.brand = res.data.brand
        data.active = res.data.act || {}
    }
}

async function getCartNum() {
    let res = await proxy.$api('CartNum', {}, false, false)
    if (res.code == 0) {
        data.cart_num = res.data.cart
    }
}

// 获取商品可用券
async function getGoodsCoupon() {
    let res = await proxy.$api('goodsCoupon', {gid: data.id}, false, false)
    if (res.code == 0) {
       data.coupon_list = res.data
    }
}


function addCart() {
    getCartNum()
}

const scroll_index = ref(0)
const opacity = ref(0)
const loadHeight = ref(true)
const main_cur = ref("info")
let infoTop = 0, infoBottom, descTop, descBottom, helpTop, helpBottom
function verticalMain(e) {
    let scrollTop = e.detail.scrollTop;
    opacity.value = scrollTop >= 300 ? 1 : 0
    let tabHeight = 0;
    if (loadHeight.value) {
        let el1 = '#main-info', el2 = '#main-desc', el3 = '#main-help'
        let view1 = uni.createSelectorQuery().select(el1);
        view1.fields({
            size: true
        }, res => {
            infoTop = tabHeight
            tabHeight = tabHeight + res.height;
            infoBottom = tabHeight;
        }).exec();
        let view2 = uni.createSelectorQuery().select(el2);
        view2.fields({
            size: true
        }, res => {
            descTop = tabHeight
            tabHeight = tabHeight + res.height;
            descBottom = tabHeight;
        }).exec();
        let view3 = uni.createSelectorQuery().select(el3);
        view3.fields({
            size: true
        }, res => {
            helpTop = tabHeight
            tabHeight = tabHeight + res.height;
            helpBottom = tabHeight;
        }).exec();
        

        loadHeight.value = false
    }

    if (scrollTop > infoTop && scrollTop < infoBottom) {
        scroll_index.value = 0
        return false
    }
    if (scrollTop > descTop && scrollTop < descBottom) {
        scroll_index.value = 1
        return false
    }
    if (scrollTop > helpTop && scrollTop < helpBottom) {
        scroll_index.value = 2
        return false
    }
}

function scrollPage(index) {
    scroll_index.value = index
    if (index == 0) {
        main_cur.value = 'info'
    } else if (index == 1) {
        main_cur.value = 'desc'
    } else if (index == 2) {
        main_cur.value = 'help'
    }
}


function promClick() {
    data.prom_status = true
}


onShareAppMessage(() => { })
onShareTimeline(() => { })
</script>

<style lang="scss" scoped>
.fixtab {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    position: fixed;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;

    .fi {
        flex: 1;
        text-align: center;
        line-height: 80rpx;
        position: relative;
        font-size: 24rpx;
        .line {
            background-color: $main_color;
            height: 6rpx;
            border-radius: 60rpx;
            width: 60rpx;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -30rpx;
        }
    }

    .fiact {
        color: $main_color;
    }
}
</style>